    <!DOCTYPE html>    
    <html>
    <head>
        <meta charset="utf-8">    
        <title>ForeHead</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">    
        <script src="/Public/js/jquery.min.js"></script> 
        <script src="/Public/js/bootstrap.min.js"></script> 
        
        <link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="/Public/css/base.css"> 
        <link rel="stylesheet" type="text/css" href="/Public/css/frozen.css">
        <style type="text/css">
            .star{
                float: left;
                /*margin: 5px 0 0 0;*/
                font-size: 12px;
                padding: 10px 15px;
            }
            .star img{
                width: 15px;
                height: 14px;
            }
            .star span{
                display: block;
                float: right;
                margin: 2px 2px;
            }
            .content{
                position: absolute;
                left: 0;
                right: 0;
                overflow-x:hidden;
                overflow-y:auto;
                text-align: center;
                padding-bottom: 49px !important;
                color: #A4A6A8;
            }
            .content .name{
                font-size: 25px;
                font-weight: bolder;
                padding-bottom: 10px;
                color: #A4A6A8;
            }
            .recommend-title{
                width: 90%;
                text-align: left;
                margin: 0 auto;
                margin-top: 5px;
            }
            .recommend-btn div{
                width: 90%;
                height: 40px;
                margin: 3px auto;
                border: 1px solid gray;
                line-height: 40px;
                background-color: white;
                /*border-radius: 5px;*/
            }
            .recommend-post{
                width: 80%;
                height: 40px;
                margin: 0 auto;
                margin-top: 50px;
                background-color: black;
                color: white;
                line-height: 40px;
                border-radius: 5px;

            }
            .userPic{
                width: 70px;
                height: 70px;
                border-radius: 50%;
                border: 1px solid gray;
                background-image:url(img/raodaqi.jpg);
                background-size: 100% 100%;
                margin: 10px auto;
                margin-top: 20px;
                font-weight: bolder;
            }
            .userName{
                text-align: left;
                margin: 10px 0 0 10px;
            }
            .item{
                width: 100%;
                height: 120px;
                background-color: white;
                color:#34d098;
                border-bottom: 1px solid #DEE0E2;
            }
            .number{
                color:#A4A6A8;
            }
            .item-ul{
                display: table;
                width: 100%;
                height: 50px;
                padding: 10px 0;
            }
            .item-li{
                display: table-cell;
                width: 50%;
                height: 30px !important;
                border-left:1px solid #c2c2c2;
            }
            .item-div{
                border-top: 1px solid #DEE0E2;
            }
            .item-li:first-child{
                border-left:0;
            }
            .item-li p{
                display: block;
                width: 100%;
                text-align: center;
                margin: 0 auto;
                font-size: 15px;
                line-height: 20px;
            }
            .comment{
                margin-top: 20px;
            }
            .comment-text-title{
                width: 100%;
                height: 30px;
                background-color: white;
                line-height: 30px;
                text-align: left;
            }
            .comment-user{
                float: left;
                margin: 5px 0 0 20px;
            }
            .comment-user img{
                width: 14px;
                height: 14px;
            }
            .comment-star{
                float: right;
                margin-right: 30px;
            }
            .comment-text{
                width: 100%;
                padding-top: 30px;
                text-align: left;
                margin-left:60px !important; 
            }
            .recommend-list-content{
                text-align: left;
                margin: 5px 16px;
            }
            .recommend-list-content div{
                display: inline-block;
            }
            .resume-text-job{
                color: #A9AEB2;
                margin: 5px 0 0 16px;
                text-align: left;
            }
            .resume-text-job div{
                
                display: inline-block;
            }
            .reffer{
                margin-top: 15px;
                height: 20px;
            }
            .line{
                position: absolute;
                left: 50%;
                padding-top: 10px;
                width: 90%;
                border-bottom: 1px solid gray;
                margin: 0 auto;
                /*z-index: -1;*/
                -webkit-transform: translate(-50%);
                -ms-transform: translate(-50%);
                transform: translate(-50%);
            }
            .reffer-way{    
                font-size: 10px;
                width: 130px;
                /*height: 20px;*/
                margin: 0 auto;
                
                background-color: #f8f9fa;
            }
            .more{
                 position: absolute;
                 left: 50%;
                z-index: 2;
                width: 70px;
                background-color: white;
                color: gray;
                border-radius: 10px;
                font-size: 10px;
                border: 1px solid gray;
                 -webkit-transform: translate(-50%);
                -ms-transform: translate(-50%);
                transform: translate(-50%);
            }
            .pic{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid gray;
                background-image:url(img/raodaqi.jpg);
                background-size: 100% 100%; 
                font-weight: bolder;
            }
            .pic-text{
                float: left;
                margin: 0 0 0 10px;
            }
            .phonenum{
                 width: 12px;
                height: 22px;
                margin: 0px 3px;
            }
            .email{
                width: 19px;
                height: 12px;
            }
             #complete-userInfo
        {
                margin-top: 30%;
        }
        .dialog-title{
            text-align: center;
            font-size: 20px;
            padding: 10px 0;
            background-color: #11beb8;
            width: 100%;
            color: white;
        }
        .dialog-content{
           padding: 50px 10px 30px 10px;
           font-size: 15px; 
        }
        .dialog-btn{
                width: 70%;
                height: 40px;
                margin: 20px auto;
                border-radius: 2px;
                background-color: #34D098;
                border-color: #34D098;
                color: white;
                line-height: 40px;
                text-align: center;
        }
        .set-close{
            z-index: 99;
            position: absolute;
            top: -8px;
            right: -8px;
            height: 28px;
            width: 28px;
            padding: 0;
            color: #11beb8;
            font-size: 12px;
            text-align: center;
            background-color: #fff;
            opacity: 1;
            border: 1px solid #11beb8;
            border-radius: 999px;
        }
        .set-close img{
            margin:0;
            padding:0;
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>

        <div class="star">
            <img src="/Public/img/评分（填满）.svg">
            <img src="/Public/img/评分（填满）.svg">
            <img src="/Public/img/评分（填满）.svg">
            <img src="/Public/img/评分（填满）.svg">
            <img src="/Public/img/评分（填满）.svg">
            <span>5.0</span>
        </div>
        <div class="content">
            <!-- <div class="userPic"><img src="{$user['headimgurl']}" /></div> -->
            <img class="userPic" src="{$user['headimgurl']}"/>
            <div class="name">
                {$user['name']}
            </div>

            <div class="item">
                <div class="item-div">
                    <ul class="item-ul">
                        <li class="item-li">
                            <p>成功推荐</p>
                            <p class="number">20人</p>
                        </li>
                        <li class="item-li">
                            <p>推荐人排名</p>
                            <p class="number">No.2</p>
                        </li>
                    </ul>
                </div>
                 <div class="item-div">
                    <ul class="item-ul">
                        <li class="item-li">
                            <p>提交用人数</p>
                            <p class="number">20人</p>
                        </li>
                        <li class="item-li">
                            <p>提交用人数排名</p>
                            <p class="number">No.2</p>
                        </li>
                    </ul>
                </div>
            </div>

           <!--  <div class="recommend">
                <div class="recommend-title job">
                    职业信息
                </div>
                <div class="recommend-btn">
                    <div>工作年限</div>
                </div>
            </div>

            <div class="recommend">
                <div class="recommend-title exprience">
                    工作经历
                </div>
                <div class="recommend-btn">
                    <div>工作经历</div>
                    <div>教育背景</div>
                    <div>推荐语</div>
                </div>
            </div> -->
        <div class="recommend">
            <div class="recommend-title">联系方式</div>

            <div class="recommend-content linkType">
                <div class="recommend-list-content">
                    <img class="phonenum" src="/Public/img/联系方式.svg">
                    18408251157
                </div>
                <div class="recommend-list-content">
                    <img class="email" src="/Public/img/邮箱.svg">
                    <a href="mailto:">18408251157@qq.com</a>
                </div>
            </div>
        </div>

        <div class="recommend">
            <div class="recommend-title">职业信息</div>

            <div class="recommend-content baseInfo">
                <div class="recommend-name">工作年限</div>
                <div class="recommend-list-content">1-3年</div>

                <div class="recommend-name">工作经历</div>
                <div class="recommend-list-content">成都脑门科技有限公司</div>
                    <div class="resume-text-job">
                        <div>html5前端工程师</div>
                        |
                        <div>2014-2015</div>
                    </div>

                <div class="reffer">
                    <div class="line"></div>
                    <div class="reffer-way more">显示更多</div>
                </div>

                <div class="recommend-name">教育背景</div>
                <div class="recommend-list-content">四川大学</div>
                <div class="resume-text-job">
                    <div>html5前端工程师</div>
                    |
                    <div>学士</div>
                    |
                    <div>2014-2015</div>
                </div>
            </div>
        </div>

          <!--   <div class="comment">
                <div class="comment-text-title">评论</div> -->
            <div class="recommend">
                <div class="recommend-title">评论</div>
                <div class="comment-content recommend-content">
                    <div>
                        <div class="pic-text">
                           <!--  <div class="pic">
                            </div> -->
                            <img class="pic" src="{$user['headimgurl']}"/>
                            <div>阿枭</div>
                        </div>
                        <div class="comment-user">
                        <span><img src="/Public/img/发布时间.svg"></span>
                            <span>05-02</span>
                            <span>14:02</span>
                        </div>
                       <!--  <div class="comment-star">
                            <div class="star">
                                <span class="glyphicon  glyphicon-star" aria-hidden="true"></span>
                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                                <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
                            </div>
                        </div> -->
                    </div>
                    <div class="comment-text">
                        推荐人态度极好，效率超高
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="complete-userInfo">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="dialog-title">请先完善你的个人资料</div>
                    <div class="dialog-content">
                        只有先完善自己的个人资料才能查看对方的信息
                        <a href="/addon/JianCai/JianCai/userInfo.html">
                            <div class="dialog-btn">去完善＝＝》</div>
                        </a>
                    </div>
                </div>
                <div class="set-close">
                    <img src="/Public/img/弹出框的关闭.svg"></div>
            </div>

        </div>
    </body>
    <script type="text/javascript">
        $("#complete-userInfo").modal('hide');
    </script>
    </html>